

<template>
  <div class="addUpdate">
    <ViewTitle text="基础信息" v-if="YZ_chufang_status == 'update'" />
    <div class="box1" v-if="YZ_chufang_status == 'update'">
      <div>
        <span>患者姓名:</span>
        <el-input
          size="mini"
          disabled
          v-model="thatF.updateChuFangData.member.name"
          placeholder="请输入病人姓名"
        ></el-input>
      </div>
      <div>
        <span>卡号:</span>
        <el-input
          size="mini"
          disabled
          v-model="thatF.updateChuFangData.member.id_card"
        ></el-input>
      </div>
      <div>
        <span>性别:</span>
        <el-input
          size="mini"
          disabled
          v-model="
            $baseBai['gender'][thatF.updateChuFangData.member.gender - 1].label
          "
        ></el-input>
      </div>
      <div>
        <span>年龄:</span>
        <el-input
          disabled
          size="mini"
          type="number"
          v-model="thatF.updateChuFangData.member.age"
          placeholder="请输入内容"
        ></el-input>
      </div>
    </div>

    <ViewTitle text="处方信息" v-if="YZ_chufang_status == 'update'" />

    <div class="box1" v-if="YZ_chufang_status == 'update'">
      <div>
        <span>医生:</span>
        <el-input
          disabled
          size="mini"
          v-model="thatF.updateChuFangData.doctor.real_name"
          placeholder="医生"
        ></el-input>
      </div>
      <div>
        <span>医生科室:</span>
        <el-input
          disabled
          size="mini"
          v-model="thatF.updateChuFangData.doctor.dept_name"
          placeholder="药品名称"
        ></el-input>
      </div>

      <div style="width: 100%">
        <span>诊断:</span>
        <div>
          <div
            style="margin: 5px 0"
            v-for="(item, index) in thatF.updateChuFangData.medical_record
              .diagnosis"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div style="width: 60%">
        <span style="width: 70px">处方备注:</span>
        <el-input
          style="margin-top: 15px"
          type="textarea"
          :rows="3"
          v-model="cf_remark"
          placeholder="请输入备注"
        >
        </el-input>
      </div>
    </div>
    <div class="box3">
      <ViewTitle
        style="margin-bottom: 20px"
        text="处方信息"
        v-if="thatF.order_tyte == 1"
      />
      <ViewTitle
        style="margin-bottom: 20px"
        text="诊疗信息"
        v-if="thatF.order_tyte == 2"
      />
      <!-- <col-lg></col-lg> -->
      <selectCommon v-if="thatF.order_tyte == 1" :thatF="this"></selectCommon>
      <div style="width: 30%" v-if="thatF.order_tyte == 1">
        <span style="width: 70px">处方备注:</span>
        <el-input
          style="margin-top: 15px"
          type="textarea"
          v-model="cf_remark"
          placeholder="请输入备注"
        >
        </el-input>
      </div>
      <div v-if="thatF.order_tyte == 1">
        <el-table
          v-loading="thatF.YZ_chufang_info_loading"
          :data="cfListSub"
          style="width: 100%"
        >
          <template v-for="(item, index) in tableTitle2">
            <el-table-column
              :width="item.width"
              v-if="item.prop == 'used_frqu'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-select v-model="scope.row.used_frqu" placeholder="频次">
                    <el-option
                      v-for="item in thatF.pinci"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.prop == 'dose'"
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input
                    v-model="scope.row.dose"
                    placeholder="数量"
                  ></el-input>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'usage'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-select v-model="scope.row.usage" placeholder="用法">
                    <el-option
                      v-for="item in thatF.geiyao"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              v-else-if="item.prop == 'count'"
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input
                    @input="watchCount"
                    v-model="scope.row.count"
                    placeholder="数量"
                  ></el-input>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'is_skin_test'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-checkbox v-model="scope.row.is_skin_test"></el-checkbox>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'dose_unit'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-select
                    v-model="scope.row.dose_unit"
                    placeholder="剂量单位"
                  >
                    <el-option
                      v-for="item in thatF.dose_unit"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'trans_speed'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-select
                      v-model="scope.row.trans_speed"
                      placeholder="滴速"
                    >
                      <el-option
                        v-for="item in thatF.disu"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'usage_extra'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-select
                    v-model="scope.row.usage_extra"
                    placeholder="西药脚注"
                  >
                    <el-option
                      v-for="item in thatF.xiyaojiaozhu"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'remark'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                      v-model="scope.row.remark"
                      placeholder="备注"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
            </el-table-column>
          </template>

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, cfListSub)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <selectCommonZL
        v-if="thatF.order_tyte == 2"
        :thatF="this"
      ></selectCommonZL>
      <div v-if="thatF.order_tyte == 2">
        <el-table
          v-loading="thatF.YZ_chufang_info_loading"
          :data="zlListSub"
          style="width: 100%"
        >
          <template v-for="(item, index) in tableTitle3">
            <el-table-column
              :width="item.width"
              v-if="item.prop == 'position'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input
                    v-model="scope.row.position"
                    placeholder="部位"
                  ></el-input>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'once'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input
                    v-model="scope.row.once"
                    type="number"
                    @input="watchCount2"
                    placeholder="次数"
                    minlength="1"

                  ></el-input>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'is_fast'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-checkbox v-model="scope.row.is_fast"></el-checkbox>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'remark'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input
                    v-model="scope.row.remark"
                    type="text"
                    placeholder="备注"
                  ></el-input>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
            </el-table-column>
          </template>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, zlListSub)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="countPrice">总价：{{ countPrice }}</div>
    </div>
    <div style="text-align: center">
      <!-- <el-button style="width: 200px;margin-right:50px;" class="butB_Add"  @click="save">哈哈哈哈哈</el-button> -->
      <el-button style="width: 200px" class="butB_Add" @click="save"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import ViewTitle from "@/forComponents/viewTitle/index.vue";
import selectCommon from "./selectCommon.vue";
import selectCommonZL from "./selectCommonZL.vue";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: ["thatF"],
  data() {
    return {
      countPrice: 0, //总价
      cfListSub: [],
      zlListSub: [],

      tableData3: [],
      activeName: "one",

      selectData: {
        placeholder: "选择药品",
        data: [],
      },
      selectDataZl: {
        placeholder: "选择诊疗项目名称",
        data: [],
      },

      tableTitle2: [],

      tableTitle3: [],
      cf_remark: "",
    };
  },
  watch:{
    zlListSub(newData, oldData){

       let price = 0;

      newData.forEach((v) => {
      
        if (v.once && v.price && v.once != "0") {
          let p1 = Math.round(v.once * v.price * 1000) / 1000;
          price = Math.round((price + p1) * 1000) / 1000;
        }
      });
  
      this.countPrice = price.toFixed(2);
            console.log("newData",newData)
             console.log("oldData",oldData)

    },
  },
  mounted() {
    // if(thatF.chufangData2.drug){

    // }
    this.cf_remark = this.thatF.updateChuFangData.remark;
    this.tableTitle2 = this.$baseBai["workstation"]["right_three_table_title"];
    this.tableTitle3 = this.$baseBai["workstation"]["right_four_table_title"];
  },
  computed: {
    ...mapState({
      YZ_chufang_status: (state) => state.doctorWorkStation.YZ_chufang_status,
    }),
  },
  methods: {
    watchCount() {
      let price = 0;

      this.cfListSub.forEach((v) => {
        if (v.count && v.price && v.count != "0") {
          let p1 = Math.round(v.count * v.price * 1000) / 1000;
          price = Math.round((price + p1) * 1000) / 1000;
        }
      });
      this.countPrice = price.toFixed(2);
    },
    watchCount2() {
      let price = 0;

      this.zlListSub.forEach((v) => {
        console.log("v.once",v.once )
        if (v.once && v.price && v.once != "0") {
          let p1 = Math.round(v.once * v.price * 1000) / 1000;
          price = Math.round((price + p1) * 1000) / 1000;
        }
      });
    this.zlListSub=this.zlListSub.map(v=>{
      return {
        ...v,
      }
    })
      this.countPrice = price.toFixed(2);
    },

    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleClick(e) {
      this.thatF.threeSelectLoading = true;
      if (this.activeName == "one") {
        this.selectData.placeholder = "选择药品";
        this.thatF.getDrugItem().then((res) => {
          this.selectData.data = this.thatF.selectData.selectData2;
        });
      } else if (this.activeName == "two") {
        this.selectData.placeholder = "选择项目名称";

        this.thatF.getServiceItem().then((res) => {
          this.selectData.data = this.thatF.selectData.selectData3;
        });
      }
    },
    save() {
      let d_cf_zl = {};
      if (this.YZ_chufang_status == "update") {
        d_cf_zl.id = this.thatF.updateChuFangData.id;
        d_cf_zl.remark = this.cf_remark;
        d_cf_zl.service_item = [];
      }
      d_cf_zl.remark = this.cf_remark;
      d_cf_zl.patient_no = this.thatF.PatientInfoDatathird.patient_no;

      //添加处方信息
      // thatF.order_tyte==2
      if (this.cfListSub.length != 0) {
        d_cf_zl.drug_item = [];
        this.cfListSub.forEach((res) => {
          d_cf_zl.drug_item.push({
            drug_id: res.id,
            unm_unit: res.base_unit,
            num: res.count,
            usage: res.usage,
            dose: res.dose,
            dose_unit: res.dose_unit,
            each_dos: res.used_frqu,
            base_unit: res.base_unit,
            trans_speed: res.trans_speed,
            usage_extra: res.usage_extra,
            price: res.price,
            is_skin_test: res.is_skin_test ? 1 : 0,
            remark: res.remark,
          });
        });
      } else {
        d_cf_zl.service_item = [];
        this.zlListSub.forEach((res) => {
          d_cf_zl.service_item.push({
            service_id: res.id,
            //  position:res.position,
            once: 1,
            union_name:res.union_name?res.union_name:'',
            is_fast: res.is_fast ? 1 : 0,
            remark: res.remark,
          });
        });
      }
     
      this["_API"].getClinic_doctorSaveRecipe(d_cf_zl).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.thatF.tabName = "third";
          // this.thatF.handleClick();
          this.thatF.updateChufangDialog = false;
          this.thatF.getClinic_doctorGetRecipe(
            this.thatF.PatientInfoDatathird.patient_no
          );
        }
      });
    },

    getDrugItem() {
      this.thatF.threeSelectLoading = true;
      this.thatF.selectParams.page = 1;
      if (this.activeName == "one") {
        this.thatF.getDrugItem();
      } else if (this.activeName == "two") {
        this.thatF.getServiceItem();
      }
    },
    handlePagination(e) {
      this.thatF.threeSelectLoading = true;
      this.selectParams.page = e;
      if (this.activeName == "one") {
        this.thatF.getDrugItem();
      } else if (this.activeName == "two") {
        this.thatF.getServiceItem();
      }
    },

    xuanzeDataTwo(item) {
      //     if( this.tableData3.findIndex(res=>res.id==item.id)===-1){
      //      this.tableData3 = this.tableData3.concat(item);
      //  }
    },
  },
  components: {
    ViewTitle,
    selectCommon,
    selectCommonZL,
    //  FormInfo
  },
};
</script>
<style lang='scss' scoped>
.countPrice {
  padding-top: 30px;
  text-align: right;
  color: red;
  font-size: 33px;
}
.addUpdate {
  padding: 0 5%;
  .box1 {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
    > div {
      position: relative;
      width: 33%;
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-bottom: 20px;

      > span {
        display: inline-block;
        width: 65px;
      }
      /deep/ .el-input {
        width: 150px;
      }
    }
  }
  .box3 {
    margin: 20px 0;
  }

  .dukaBut {
    margin: 0px 0 20px;
  }
}
/deep/ .el-dialog__body {
  // height: 70vh;
  // overflow: scroll;
}
.selects {
  width: 300px;
  margin: 0px 0 20px;
}
</style>
